import React from 'react';
import { Input, message, Button, Upload } from 'antd';
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';

const { TextArea } = Input;

const TemplateTabPane = (props) => {

    const {
        markdownTemplate, setMarkdownTemplate
    } = props;

    const downloadMarkdown = () => {
        const blob = new Blob([markdownTemplate], { type: 'text/markdown' });
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = '主题报告_模版.md';
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
        URL.revokeObjectURL(url);
    };

    const beforeUpload = (file) => {
        const fileNames = file.name.split(".");
        const fileType = fileNames[fileNames.length - 1];
        if (["md", "markdown"].indexOf(fileType) < 0) {
            message.error('只能上传 markdown 文档！');
            return false;
        }
        if (file.size / 1024 / 1024 / 1024 > 1) {
            message.error('上传大小限制为1G的文档！');
            return false;
        }

        console.log("RetrievalPage uploadDocument file name => ", file.name);
        const reader = new FileReader();
        reader.onload = (event) => {
            const content = event.target?.result;
            setMarkdownTemplate(content);
        };
        reader.readAsText(file, 'utf-8');
        return true;
    }

    const textAreaHeight = (window.innerHeight - 316) / 2;

    return (
        <div style={{ display: 'flex', flexDirection: "column", height: '100%', fontFamily: 'sans-serif', padding: "5px 0px 0px 20px" }}>
            {/* 编辑区 */}
            <div style={{ flex: 1 }}>
                <div style={{ marginBottom: '20px' }}>
                    <Upload showUploadList={false} beforeUpload={beforeUpload}>
                        <Button type="dashed"><i className="ri-file-upload-line" />上传md</Button>
                    </Upload>
                    <Button type="dashed" onClick={downloadMarkdown} style={{ marginLeft: 20 }}>
                        <i className="ri-file-download-line" />下载md
                    </Button>
                    <Button type="dashed" onClick={downloadMarkdown} style={{ marginLeft: 20 }}>
                        <i className="ri-save-3-line" />默认
                    </Button>
                </div>
                <TextArea
                    value={markdownTemplate}
                    onChange={(e) => setMarkdownTemplate(e.target.value)}
                    style={{ height: textAreaHeight, padding: '10px', fontSize: '14px', fontFamily: 'monospace', resize: 'none' }}
                    placeholder="输入 Markdown 输出格式模版..."
                />
            </div>
            {/* 预览区 */}
            <div style={{ flex: 1, padding: '20px 0px 0px 0px' }}>
                <div style={{ padding: '0px 15px 15px 15px', border: '1px solid #eee', borderRadius: '4px', backgroundColor: '#fafafa', height: textAreaHeight, overflowY: 'auto' }}>
                    <ReactMarkdown remarkPlugins={[remarkGfm]}>{markdownTemplate}</ReactMarkdown>
                </div>
            </div>
        </div>
    );
}

export default TemplateTabPane;
